<template>
   <div class="flex flex-wrap gap-4">
    <el-card style="width: 400px" shadow="hover">
        <span class="title">抽油机编号：</span>
        <span class="content" style="margin-left: 170px;">{{ id }}</span>
    </el-card>
    <el-card style="width: 400px" shadow="hover">
        <span class="title">抽油机型号：</span>
        <span class="content" style="margin-left: 140px;">{{unitmodel}}</span>
    </el-card>
    <el-card style="width: 400px" shadow="hover">
        <span class="title">抽油机类型：</span>
        <span class="content">{{unittype==0?'游梁平衡型抽油机':unittype==1?'曲柄平衡型抽油机':unittype==2?'无游梁式抽油机':'其他'}}</span>
    </el-card>
    <el-card style="width: 400px" shadow="hover">
        <span class="title">生产日期：</span>
        <span class="content" style="margin-left: 153px;">{{ productionDate }}</span>
    </el-card>
    <el-card style="width: 400px" shadow="hover">
        <span class="title">部署日期：</span>
        <span class="content" style="margin-left: 153px;">{{ deploymentDate }}</span>
    </el-card>
  </div>
</template>

<script setup lang="ts">

defineProps(['id','unittype','unitmodel','productionDate','deploymentDate'])

</script>

<style scoped>
.title{ 
        margin: 15px
}
.content{
        
        margin-left: 100px;
        color: blue
}
</style>